<template>
  <view class="box">


    <view class="top-box">
      <view>Hi</view>
      <view class="next-text">欢迎使用！</view>
    </view>
    <!-- 找回密码 -->
    <view class="center-box">


      <view class="input-box">
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入手机号" v-model="phone">
        </view>
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入验证码" v-model="code" />
          <text class="input-code" @click="getCode">{{codeText}}</text>
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请输入新的密码" v-model="password">
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请再次输入新密码" v-model="confirmPassword">
        </view>

      </view>

      <view class="sumbit-btn">
        <button class="button" @click="updatePassword" style="background-color: #33ccff;font-size: 30rpx;"
          type="primary">立即修改</button>
      </view>
    </view>
    <!-- 重影 -->
    <view class="shadow shadow-1"></view>
    <view class="shadow shadow-2"></view>
    <!-- 说明 -->
    <view class="bottom-box">
      关注文义喵~关注文义谢谢喵！
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        codeText: '获取验证码',
        counting: false,
        phone: '',
        password: '',
        confirmPassword: '',
        code: '',

      }
    },
    methods: {

      // TODO 修改密码
      updatePassword() {

      },


      // 获取验证码
      getCode() {
        console.log(this.counting)
        if (!this.counting) {
          uni.showToast({ title: '验证码已发送', })
          //开始倒计时60秒
          this.countDown(60)
        }
      },
      //倒计时60秒
      countDown(count) {
        if (count === 0) {
          this.codeText = '获取验证码'
          this.counting = false
          return
        }
        this.counting = true
        this.codeText = count + '秒后重新获取'
        setTimeout(() => {
          count--
          this.countDown(count)
        }, 1000)
      },
    },


  }
</script>

<style lang="scss">
  page {
    height: 100%;
    background-color: white;
    margin: 0px;
    padding: 0px;
  }

  .box {
    // margin-top: 15%;
  }

  /* 顶部背景 */
  .top-box {
    height: 30%;
    background-image: linear-gradient(#44ADFB, #5ed6fd);
    padding: 30rpx;
    color: white;
    font-weight: bold;
  }

  .next-text {
    margin-top: 15rpx;
  }

  /* 内容 */
  .center-box {
    background-color: white;
    margin: 20% 20rpx 0rpx 20rpx;
    padding: 25rpx;
    border-radius: 15rpx;
    -webkit-filter: drop-shadow(0 0 8rpx #44ADFB);
    filter: drop-shadow(0 0 8rpx #44ADFB);
  }



  .wei-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }


  .input {
    padding-left: 20rpx;
    font-size: 30rpx;
  }

  .input-code {
    position: absolute;
    right: 40rpx;
    font-size: 26rpx;
    padding: 10rpx 15rpx;
    color: white;
    background-color: #FF8C69;
    border-radius: 10rpx;
  }


  .sumbit-btn {
    margin: 6% 30rpx 30rpx 30rpx;
  }

  /* 重影 */
  .shadow {
    box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;
    border-radius: 25rpx;
    background-color: white;
  }

  .shadow-1 {
    height: 40rpx;
    margin: -20rpx 50rpx 0 50rpx;
  }

  .shadow-2 {
    position: relative;
    z-index: -888;
    height: 50rpx;
    margin: -30rpx 80rpx 0 80rpx;
  }

  /* 最底部 */
  .bottom-box {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    font-size: 24rpx;
    color: gray;
    display: flex;
    justify-content: center;
  }
</style>